/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 18:05:33
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PixelRatio,
  TouchableOpacity,
  Image,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorBlack,
  splitLineColorLightGray,
  fontColorSecDeepGray,
} from '@/styles';
import {
  iconBottom,
  iconTop,
} from '@/images';

export default class InsuranceDuty extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 1,
    };
  }

  componentDidMount() {}

  render() {
    const { active } = this.state;
    const { insuranceDetailSelct } = this.props;
    return (
      <View style={styles.wrap}>
        <Text style={styles.title}>保障责任</Text>
        <View style={styles.selectItem}>
          <Text style={styles.label}>保费:</Text>
          <TouchableOpacity
            style={styles.selectItemRight}
            activeOpacity={0.8}
            onPress={() => {
              if (active != 1) {
                this.setState({ active: 1 });
              } else {
                this.setState({ active: 0 });
              }
            }}
          >
            <Text style={styles.desc}>
              ¥
              {insuranceDetailSelct.insurAmount}
            </Text>
            <Image
              source={active == 1 ? iconBottom : iconTop}
              style={styles.iconImg}
              resizeMode='stretch'
            />
          </TouchableOpacity>
        </View>

        {active == 1 && this.renderDesc()}

        <TouchableOpacity
          style={styles.selectItem}
          activeOpacity={0.8}
          onPress={() => {
            if (active != 2) {
              this.setState({ active: 2 });
            } else {
              this.setState({ active: 0 });
            }
          }}
        >
          <Text style={styles.label}>保额:</Text>
          <View style={styles.selectItemRight}>
            <Text style={styles.desc}>
              ¥
              {insuranceDetailSelct.ensureAmount}
            </Text>
            <Image
              source={active == 2 ? iconBottom : iconTop}
              style={styles.iconImg}
              resizeMode='stretch'
            />
          </View>
        </TouchableOpacity>

        {active == 2 && this.renderDesc()}
      </View>
    );
  }

  renderDesc = () => {
    const { active } = this.state;
    const { insuranceDetailSelct } = this.props;
    let list = [];
    list = insuranceDetailSelct.attachList.map((item) => {
      if (active === 1) { // 保费
        return { keyName: item.keyName, value: item.value };
      }
      if (active === 2) {
        return { keyName: item.keyName, value: item.value2 };
      }
    });
    console.log(list);

    return (
      <View style={styles.content}>
        {list.map((item) => {
          return (
            <View style={styles.contentItem}>
              <Text style={styles.label02}>
                {item.keyName}
                :
              </Text>
              <Text style={styles.desc02}>
                ¥
                {item.value}
              </Text>
            </View>
          );
        })}
      </View>
    );
  };
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(32),
    marginTop: px2dp(24),
  },
  content: {},
  contentItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: px2dp(24),
  },
  title: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  label: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
    flex: 2,
  },
  desc: {
    fontSize: px2dp(26),
    color: fontColorBlack,
  },
  label02: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
    flex: 2,
    textAlign: 'left'
  },
  desc02: {
    fontSize: px2dp(26),
    color: fontColorBlack,
    flex: 1,
    textAlign: 'right'
  },
  selectItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderBottomColor: splitLineColorLightGray,
    borderBottomWidth: 1 / PixelRatio.get(),
    height: px2dp(94),
  },
  selectItemRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconImg: {
    width: px2dp(28),
    height: px2dp(28),
    marginLeft: px2dp(4),
  },
});
